<script setup lang="ts">
defineProps<{
    score: number;
    size?: string;
}>();

const getStars = (score: number) => {
    const fullStars = Math.floor(score);
    const hasHalfStar = score % 1 >= 0.5;
    const emptyStars = 5 - fullStars - (hasHalfStar ? 1 : 0);

    return {
        full: Array(fullStars).fill('★'),
        half: hasHalfStar ? ['½'] : [],
        empty: Array(emptyStars).fill('☆')
    };
};
</script>

<template>
    <span class="rating-stars" :style="{ fontSize: size || '1em' }">
        <span class="star full" v-for="(star, index) in getStars(score).full" :key="`full-${index}`">★</span>
        <span class="star half" v-for="(star, index) in getStars(score).half" :key="`half-${index}`">★</span>
        <span class="star empty" v-for="(star, index) in getStars(score).empty" :key="`empty-${index}`">☆</span>
    </span>
</template>

<style scoped>
.rating-stars {
    color: #ffb800;
    letter-spacing: 2px;
}

.star.full {
    color: #ffb800;
}

.star.half {
    position: relative;
    display: inline-block;
    color: #ffb800;
    overflow: hidden;
    width: 0.5em;
}

.star.empty {
    color: #ddd;
}
</style>